<template>
  <div>
    <span class="countUp" ref="countUp">{{ num }}</span>
  </div>
</template>

<script>
import {CountUp} from 'countup.js';

export default {
  data() {
    return {
    };
  },
  props: {
    num: {
      type: [Number, String],
      default() {
        return 0;
      }
    }
  },
  watch: {
    num(newValue, oldValue) {
      const countUp = new CountUp(this.$refs.countUp, newValue, {
        startVal: oldValue,
        duration: 1.5,
      });
      if (!countUp.error) {
        countUp.start();
      } else {
        console.error(countUp.error);
      }
    },
  },
  mounted() {
  },
};
</script>
